<template>
    <div>
        <el-form label-width="100px" :model="AdmExp" :rules="rules"
                 ref="recordForm"
                 class="demo-ruleForm" >
            <div>
                <el-row>
                    基本信息
                    <hr>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="收件人:" prop="Recipients">
                            <el-input :disabled="disabled" v-model="AdmExp.systemUserRecipients" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="收件日期:" prop="Dateofreceipt">
                            <el-input v-model="AdmExp.expressageDateofreceipt" type="date" :disabled="disabled" size="small"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="快递公司:" prop="SendWaay">
                            <el-select v-model="AdmExp.expressageSendWaayId" :disabled="disabled" placeholder="请选择" size="small">
                                <el-option label="--请选择--" value=""></el-option>
                                <el-option v-for="ite in SendWaayS" :key="ite.id" :label="ite.sendName" :value="ite.id"></el-option>
                            </el-select>
                                <el-popover placement="right" width="200px"  height="110px" trigger="click">
                                    <sendwan></sendwan>
                                    <el-button slot="reference" round size="mini">打开/闭合</el-button>
                                </el-popover>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="快件类型:" prop="ExpressType">
                            <el-select v-model="AdmExp.expressageExpressTypeId" :disabled="disabled" placeholder="请选择" size="small">
                                <el-option label="--请选择--" value=""></el-option>
                                <el-option v-for="item in Exps" :key="item.id" :label="item.expressName" :value="item.id" ></el-option>
                            </el-select>
                            <el-popover placement="right" width="200px"  height="110px" trigger="click">
                                <typew></typew>
                                <el-button slot="reference" round size="mini">打开/闭合</el-button>
                            </el-popover>
                        </el-form-item>
                    </el-col>
                <el-col :span="10">
                    <el-form-item label="领件状态:" prop="takestatus">
                        <el-select placeholder="领取状态" v-model="AdmExp.takestatus"  size="small" :disabled="disabled">
                            <el-option label="未领取" :value="1"></el-option>
                            <el-option label="已领取" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-col></el-col>
                </el-col>
            </el-row>
                <el-row>
                    其他信息： <el-button size="mini" @click="dakai" round>打开/闭合</el-button>
                    <hr>
                </el-row>
            </div>
            <div v-show="ad==1">
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="案件:">
                            <el-select v-model="AdmExp.caseNo" :disabled="disabled" placeholder="请选择" size="small">
                                <el-option label="--请选择--" value=""></el-option>
                                <el-option v-for="item in CaseLas" :key="item.id" :label="item.caseNo" :value="item.caseNo" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="领件人:">
                            <el-input v-model="AdmExp.collarPerson"  size="small" :disabled="disabled"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row> <el-row>
                <el-col :span="10">
                    <el-form-item label="快递费:">
                        <el-input :disabled="disabled" type="number" size="small" v-model="AdmExp.expressFee"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="快递单号:">
                        <el-input v-model="AdmExp.expressageCourierNumber"  size="small" :disabled="disabled"></el-input>
                    </el-form-item>
                </el-col>
            </el-row><el-row>
                <el-col :span="10">
                    <el-form-item label="领件时间:" prop="caseNo">
                        <el-input :disabled="disabled"  size="small" type="date" v-model="AdmExp.expressageBringDate"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="相关文件">
                        <el-upload
                                class="upload-demo"
                                ref="upload"
                                name="multipartfile"
                                action="http://localhost/upload"
                                :headers="{token:this.$store.state.token}"
                                :data="{folder:'notice'}"
                                :on-success="handleUploadSuccess"
                                :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                        </el-upload>
                    </el-form-item>
                    <!--写一个隐藏框 来储存路径 属性名称 notices.noticeFile-->
                    <el-input v-model="AdmExp.expressageFile" v-show="false"></el-input>
                </el-col>
            </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="领件说明:">
                            <el-input
                                    size="small"
                                    type="textarea"
                                    :rows="3"
                                    :disabled="disabled"
                                    placeholder="请输入内容"
                                    v-model="AdmExp.expressageCollarnote">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="领件说明:">
                            <el-input
                                    size="small"
                                    type="textarea"
                                    :rows="3"
                                    :disabled="disabled"
                                    placeholder="请输入内容"
                                    v-model="AdmExp.expressageRemark">
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
            <div align="center">
                <el-row align="center">
                    <el-col :span="20">
                        <el-button type="primary" @click="Addssag('recordForm')" :disabled="disable">提交</el-button>
                        <el-button @click="coles">取消</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script>
    import typew from "../../gsl/ExpressType/ExpressType";
    import sendwan from "../../gsl/SendWaay/sendwaay";
    import sendwaay from "../../../model/gsl/SendWaay/sendwaay";
    const send=sendwaay.getInstance();
    import express from "../../../model/gsl/ExpressType/expresstype";
    const exp=express.getInstance();
    import CaseLawService from '../../../model/gs/CaseLawService.js'
    const caseLawService = CaseLawService.getInstance()
    export default{
        components:{typew,sendwan},
        props:["AdmExpr","ada","tue"],
        data() {
            var Recipients = (rule, value, callback) => {
                value=this.AdmExp.systemUserRecipients;
                if (!value) {
                    this.disable=true;
                    callback(new Error('收件人姓名'));
                } else {
                    callback();
                    this.disable=false;
                }
            }; var Dateofreceipt = (rule, value, callback) => {
                value=this.AdmExp.expressageDateofreceipt;
                if (!value) {
                    callback(new Error('请输入收件日期'));
                } else {
                    callback();
                    this.disable=false;
                }
            }; var SendWaay = (rule, value, callback) => {
                value=this.AdmExp.expressageSendWaayId;
                if (!value) {
                    callback(new Error('请输入快递公司'));
                } else {
                    callback();
                    this.disable=false;
                }
            }; var ExpressType = (rule, value, callback) => {
                value=this.AdmExp.expressageExpressTypeId;
                if (!value) {
                    callback(new Error('请输入快递类型'));
                } else {
                    callback();
                    this.disable=false;
                }
            };var takestatus = (rule, value, callback) => {
                value=this.AdmExp.takestatus;
                if (!value) {
                    callback(new Error('是否签收'));
                } else {
                    callback();
                    this.disable=false;
                }
            };


            return {
                SendWaayS:[],
                Exps:[],
                AdmExp: JSON.parse(JSON.stringify(this.AdmExpr)),
                ad:0,
                disabled:this.tue,
                disable:true,
                CaseLas:[],
                rules: {
                    Recipients: [{ required: true,validator: Recipients, trigger: 'blur' }],
                    Dateofreceipt: [{ required: true,validator: Dateofreceipt, trigger: 'blur' }],
                    SendWaay: [{ required: true,validator: SendWaay, trigger: 'change' }],
                    ExpressType: [{ required: true,validator: ExpressType, trigger: 'change' }],
                    takestatus: [{ required: true,validator: takestatus, trigger: 'change' }],}
            };
        },
        created(){
            this.GetSendWaays();
            this.GetExpressType();
            this.GetCaselaw();
        },
        methods: {
            dakai(){
                this.ad++;
                if (this.ad==2){
                    this.ad=0
                }
            },
            handleUploadSuccess(response){
                this.AdmExp.expressageFile=response.data;
            },
            submitUpload() {
                this.$refs.upload.submit();
            },
            GetSendWaays(){
                send.list(null).then((re)=>{
                    this.SendWaayS=re.data.data;
                })
            },GetExpressType(){
                exp.list(null).then((re)=>{
                    this.Exps=re.data.data;
                })
            },
            coles(){
                this.$emit('coles',this.ada);
            },
             GetCaselaw(){
                 caseLawService.list(null).then((re)=>{
                     this.CaseLas=re.data.data;
                 })
             },
            Addssag(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit('AddAdmExpre',this.AdmExp);
                        this.adde={};
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
        }
    }
</script>
